@import '../../../var.less';

.box{
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tableHeader{
  height: 28px;
  min-height: 28px;
  background-color: var(--color-bg-300);
  >div:nth-of-type(4),>div:nth-of-type(5),>div:nth-of-type(6){
    padding: 0px 24px;
  }
}

.scrollBox{
  flex: 1;
  overflow-y: scroll;
}

.expandBox{
  .title{
    margin: 10px 0px;
    padding: 0px 20px;
    height: 28px;
    line-height: 28px;
    background-color: var(--color-bg-300);
  }
  .form{
    padding: 0px 20px;
    width: 350px;
    :global{
      .custom-form-item{
        >div >div:nth-of-type(1){
          width: 70px;
          text-align: left;
        }
      }
    }
  }
}

.tableMain{
  // .tableRow:last-of-type{
  //   border-bottom: 0;
  // }
}

.select{
  width: 100%;
}

.dragging{
  .tableRow{
    transition: transform .5s;
  }
}

.tableRow{
  transform: translateY(0px);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  &:hover{
    background-color: var(--custom-primary-1);
  }
}

.cellContent{
  border: 1px solid transparent;
  padding: 2px 11px;
  height: 22px;
  &:hover{
    border: 1px solid var(--color-border);
  }
}

.draggingRow{
  transition: transform 0s !important;
  transition: none;
  position: relative;
  z-index: 2;
  background-color: var(--color-bg-300) !important;
  box-shadow: var(--color-box-shadow);
}

.deleteButton{
  color: var(--custom-primary-color);
  cursor: pointer;
  &:hover{
    text-decoration: underline;
  }
}

.addDataButton{
  width: 100%;
  margin: 10px 0px;
  i{
    margin-right: 8px;
  }
}

.cellMoveBox{
  cursor: move;
}